<template>
    <div class="content shopCart">
        <div class="breadcrumb">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
                <el-breadcrumb-item>购物车</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- Steps -->
        <div class="steps">
            <el-steps :active="1" align-center>
                <el-step title="购物车"></el-step>
                <el-step title="订单信息"></el-step>
                <el-step title="订单⽀付"></el-step>
                <el-step title="成功提交订单"></el-step>
            </el-steps>
        </div>
        <!-- table -->
        <div class="table">
            <el-table  element-loading-text="正在为您拼命加载中..." :data="tableData" ref="multipleTable" style="width: 100%"
                      @selection-change="handleSelectionChange" :close-on-click-modal="false" :close-on-press-escape="false"
                      :header-cell-style="{background:'rgba(5,2,3,0.29)',color:'#999'}">
                <el-table-column type="selection" width="75" align="center" />
                <el-table-column prop="shopImg" align="center" width="150" label="样品">
                    <template slot-scope="scope">
                        <img :src="`/img/productPictures/${scope.row.imageSrc}`" class="shopImg" alt="未加载图片">
                    </template>
                </el-table-column>
                <el-table-column prop="shop" align="center" label="描述">
                    <template slot-scope="scope">
                        <span class="shop">{{scope.row.shoppingcartProduct.productTitle}}</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="v" label="单价" align="center">
                    <template  slot-scope="scope">
                        <span class="price">¥{{scope.row.shoppingcartPrice}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="数量" align="center">
                    <template slot-scope="scope">
                        <el-input v-model.shoppingcartNumber="scope.row.shoppingcartNumber" oninput="value=value.replace(/[^\d]/g,'')" autocomplete="off" style="width:140px" size="mini"
                                  @change="handleInput(scope.row)">
                            <el-button size="mini" slot="prepend" @click="del(scope.row)"><i class="el-icon-minus"></i></el-button>
                            <el-button slot="append" size="mini" @click="add(scope.row)"><i class="el-icon-plus"></i></el-button>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="count" label="⼩计" align="center">
                    <template slot-scope="scope">
                        <span class="count">¥{{scope.row.goodTotal || scope.row.shoppingcartNumber*scope.row.shoppingcartPrice }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-delete" style="font-size:18px; cursor: pointer;" @click="handleDelete(scope.$index, scope.row)"></i>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog
                    title="填写收货地址"
                    :visible.sync="addressShow"
                    width="30%"
            >
                <el-form ref="form" :model="order" label-width="80px">
                    <el-form-item label="收货人" >
                        <el-input v-model="order.name" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地区" >
                        <el-input v-model="order.address" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址" >
                        <el-input v-model="order.detailAddress" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" >
                        <el-input v-model="order.phoneNumber" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" >
                        <el-input v-model="order.message" placeholder="请输入内容"></el-input>
                    </el-form-item>
                            <el-checkbox  label="设为默认地址" name="type">设为默认地址</el-checkbox>
                </el-form>
                <span style="margin-left: 240px;margin-top: 30px">
									<el-button @click="addressShow = false" type='danger'>取 消</el-button>
									<el-button type="primary" @click="submit(multipleSelection)">保存</el-button>
                </span>
            </el-dialog>

            <div class="submit">
                <van-submit-bar :price="totalPrice*100" :disabled='multipleSelection.length<=0' button-color='#bfa548' button-text="去结算" label='产品总额：'>
                    <p class="submitBar">
                        <span>继续购物 </span>
                        <span style="margin-left: 10px">
                         共 <b>{{tableData.length}}</b> 件商品,
                        已选择 <b>{{multipleSelection.length}}</b> 件
                        </span>
                        <span class="close" >产品总额：<b>{{totalPrice==0?'0.00':totalPrice}}</b>
                            <el-button id="goPay" @click="addressShowClick"  type="" round>去结算</el-button>
                        </span>
                    </p>
                </van-submit-bar>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        name:'shoppingCart',
        data() {
            return {
                //shopImg: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1606288963.72951431.jpg",
                shopImg: "/img/productPictures/caoMei_0.jpg",
                order:{},
                addressShow:false,//新增收货地址显示
                tableData: [
                    {
                        shoppingcartProduct:{productTitle: '⼩⽶不能写红⾊ 10⽀装'},
                        shoppingcartPrice: 20, shoppingcartNumber: 1, goodTotal: 20,
                    },
                ],
                totalPrice: 0,
                multipleSelection: [],
            }
        },
            methods: {
                addressShowClick:function(){
                    this.addressShow = true;
                },
                // 删除单个商品
                handleDelete(index, row) {
                    this.$confirm('确定删除该商品？', '提⽰', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //删除数组中指定的元素
                        this.tableData.splice(index, 1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                // 数量变化触发
                handleInput(value) {
                    console.log(value);
                    if (null == value.shoppingcartNumber || value.shoppingcartNumber == "" || value.shoppingcartNumber == 0) {
                        value.shoppingcartNumber = 1;
                    }
                    value.goodTotal = (value.shoppingcartNumber * value.shoppingcartPrice).toFixed(2);//保留两位⼩数
                    //增加商品数量也需要重新计算商品总价
                    this.handleSelectionChange(this.multipleSelection);
                },
                add(addGood) {
                    //输⼊框输⼊值变化时会变为字符串格式返回到js
                    //此处要⽤v-model，实现双向数据绑定
                    if (typeof addGood.shoppingcartNumber == 'string') {
                        addGood.shoppingcartNumber = parseInt(addGood.shoppingcartNumber);
                    };
                    addGood.shoppingcartNumber += 1;
                    addGood.goodTotal = (addGood.shoppingcartNumber * addGood.shoppingcartPrice).toFixed(2);//保留两位⼩数
                    this.handleSelectionChange(this.multipleSelection)
                },
                del(delGood) {
                    if (typeof delGood.shoppingcartNumber == 'string') {
                        delGood.shoppingcartNumber = parseInt(delGood.shoppingcartNumber);
                    };
                    if (delGood.shoppingcartNumber > 1) {
                        delGood.shoppingcartNumber -= 1;
                        delGood.goodTotal = (delGood.shoppingcartNumber * delGood.shoppingcartPrice).toFixed(2);//保留两位⼩数
                        this.handleSelectionChange(this.multipleSelection)
                    }
                },
                handleSelectionChange(selection) {
                    this.multipleSelection = selection;
                    this.totalPrice = 0;
                    //此处不⽀持forEach循环，只能⽤原始⽅法了
                    for (var i = 0; i < selection.length; i++) {
                        //判断返回的值是否是字符串
                        if (typeof selection[i].goodTotal == 'string') {
                            selection[i].goodTotal = parseInt(selection[i].goodTotal);
                        };
                        this.totalPrice += selection[i].shoppingcartNumber*selection[i].shoppingcartPrice;
                    }
                    this.totalPrice = this.totalPrice.toFixed(2)
                },
                submit(data){
                    const  that = this
                    this.order.userId = this.$cookies.get("id")
                    this.tableData = this.tableData.filter((item) =>{
                        for (let i = 0; i <data.length; i++) {
                            return data[i].shoppingcartId != item.shoppingcartId
                        }
                    })
                    this.$message({   //弹出错误框
                                        showClose: true,
                                        type: "success",
                                        message: "结算成功",
                                        center: true
                                    })
                    this.addressShow = false
                    // console.log('order',{...that.order,...data})
                    // this.$axios({
                    //     url: '/api/productOrder/addOrder',
                    //     method: 'post',
                    //     data: {
                    //         ...that.order,...data
                    //     }
                    // }).then(res=>{
                    //     if (res.data == 1) {
                    //         this.$message({   //弹出错误框
                    //             showClose: true,
                    //             type: "success",
                    //             message: "结算成功",
                    //             center: true
                    //         })
                    //     }else {
                    //         this.$message({   //弹出错误框
                    //             showClose: true,
                    //             type: "error",
                    //             message: "结算失败",
                    //             center: true
                    //         })
                    //     }
                    // })

                },
                getShoppingCart(){
                    let userId = this.$cookies.get("id")
                    this.$axios(`/api/shoppingCart/findByUserId/${userId}`).then(async res => {
                        if (res.status === 200){
                            console.log("购物车进入完毕，数据data为：",res.data)
                            this.tableData = res.data
                        }
                        }).catch(error => {
                    })
                },

            },
        created() {
            this.getShoppingCart();
        },
    }
</script>
<style lang="scss" scoped>
    .shopCart {
        width: 90%;
        margin-bottom: 50px;
        margin-left: 70px;
    }
    .breadcrumb {
        margin: 30px 30px;
    }
    ::v-deep .el-breadcrumb__inner.is-link {
        color: #bfa548;
    }
    .steps {
        margin-top: 50px;
    }
    ::v-deep .el-step__head {
        border-color: #d8d8d8;
        color: #fff;
    }
    ::v-deep .el-step__head.is-finish {
        color: #fff;
        border-color: #bfa548;
    }
    ::v-deep .el-step__title {
        font-size: 15px;
    }
    ::v-deep .el-step__title.is-finish {
        color: #bfa548;
    }
    ::v-deep .el-step__title.is-process {
        color: #d8d8d8;
    }
    ::v-deep .is-finish  .is-text {
        background: #bfa548;
    }

    ::v-deep .is-process .is-text {
        background: #d8d8d8;
    }

    ::v-deep .is-wait .is-text {
        background: #d8d8d8;
    }
    ::v-deep .el-step__line {
        height: 5px;
        top: 10px;
        background-color: #f1f1f1;
    }
    .table {
        margin-top: 50px;
        position: relative;
        padding-bottom: 100px;
    }
    ::v-deep .el-input__inner {
        text-align: center;
    }
    ::v-deep .el-input-group__append {
        padding: 0 15px;
    }
    ::v-deep .el-input-group__prepend {
        padding: 0 15px;
    }
    .shopImg {
        width: 100%;
    }
    .price,
    .shop {
        color: #000733;
    }
    .count {
        color: #bfa548;
    }
    ::v-deep .el-checkbox__inner {
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
    ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #bfa548;
        border-color: #bfa548;
    }
    ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #bfa548;
        border-color: #bfa548;
    }
    ::v-deep .el-checkbox__inner::after {
        left: 7px;
        top: 3px;
    }
    ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
        top: 7px;
    }
    .submit {
        position: absolute;
        right: 0;
        left: 0;
    }
    ::v-deep .van-submit-bar {
        position: absolute;
        top: 20px;
    }
    .van-submit-bar__bar {
        background-color: #f8f8f8;
        padding: 30px 20px 30px 28px;
    }
    .submitBar {
        color: #757575;
        display: flex;
        align-items: center;
        margin-left: 40px;
        margin-top: 50px;
    }
    b {
        color: #bfa548;
        margin: 0 5px;
    }
    span {
        display: flex;
        align-items: center;
    &:first-child {
        cursor: pointer;
    &:hover {
        color: #bfa548;
    }

    ::after {
        display: inline-block;
        content: "";
        width: 1px;
        height: 12px;
        background: #ccc;
        margin: 0 10px;
    }

    }
    }



    ::v-deep .van-submit-bar__price {
        color: #bfa548;
    }
    ::v-deep .van-submit-bar__text {
        padding-right: 30px;
        color: #000733;
    }
    .close{
        margin-left: 700px;
    &:hover {
        color: #bfa548;
    }
    }
    #goPay{
        margin-left: 50px;
        color: rgba(255, 248, 249, 0.96);
        background-color:#bfa548;

    }

    </style>
